<template>
  <Maptalks :mapOnLoadCB="mapOnLoadCB"></Maptalks>
  <div class="pane">
    <p @click="play">Play</p><br/>
    <p @click="pause">Pause</p><br/>
    <p @click="cancel">Cancel</p><br/>
    <p @click="finish">Finish</p><br/>
    <p @click="speed(0.5)">0.5X</p><br/>
    <p @click="speed(1)">1X</p><br/>
    <p @click="speed(2)">2X</p><br/>
    <p @click="speed(4)">4X</p><br/>
    <span id="info">current info: </span><br/>
  </div>
</template>

<script>
import Maptalks from "@/components/common/Maptalks.component.vue"
import MapLayerConst from "@/const/MapLayerConst"
import {route, routeList} from "@/data/route"
import {ref} from "vue";

export default {
  name: "AddRoutePlay.component",
  components: {Maptalks},
  setup() {
    let player = ref(null), unitTime = ref(0)

    const play = () => {
      player.value.play();
    }

    const pause = () => {
      player.value.pause();
    }

    const finish = () => {
      player.value.finish();
    }

    const cancel = () => {
      player.value.cancel();
    }

    const speed = (t) => {
      player.value.setUnitTime(unitTime.value * t);
    }


    let mapOnLoadCB = (map) => {
      map.setZoom(14)

      player.value = new maptalks.RoutePlayer(route, map, {
        unitTime: 500,
        maxTrailLine: 10,
        lineOptions: {
          symbol: {
            lineWidth: 4,
            lineColor: '#0dea0f',
            // "markerFile": relative2path("6.png"),
            // "markerPlacement": "point", //vertex, point, vertex-first, vertex-last, center
            // "markerWidth": 33,
            // "markerHeight": 43,
          },
          smoothness: 0.5,
        },
        walkedLineOptions: {
          symbol: {
            lineWidth: 4,
            lineColor: '#ff0000',
          },
          smoothness: 0.5,
        }
      });
      unitTime.value = player.value.getUnitTime();

      // player.hideRoute();
      // player.hideTrail();

      player.value.on("playing", function (params) {
        if (player.value.getCurrentProperties(0) !== undefined && player.value.getCurrentProperties(0) !== null) {
          $("#info").text(
              "current info: " + player.value.getCurrentProperties(0).info
          );
        }
        // 视野跟随当前marker移动
        // map.setCenterAndZoom(player.value.getCurrentCoordinates(), 14);
      });

      player.value.on("playfinish", function (params) {
        // MaptalksCommonService.setView(params.target.trailLinePoints)
      });

      player.value.play();
    }

    return {
      mapOnLoadCB, play, pause, finish, cancel, speed
    }
  }
}
</script>

<style scoped lang="less">
.pane {
  background: #34495e;
  line-height: 28px;
  color: #fff;
  z-index: 10;
  position: absolute;
  top: 20px;
  right: 20px;

  p {
    cursor: pointer;
    display: block;
    color: #fff;
    text-align: left;
    padding: 0 10px;
    min-width: 28px;
    min-height: 28px;
    float: left
  }
}

</style>